<template>
  <div :class="['article-desc', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="essay-content" v-if="$route.query.data_id">
      <div class="essay-title">
        {{ essayDesc.title }}
      </div>
      <div class="essay-second-title all-center">
        <el-image class="head-img" fit="cover" :src="getUserPhoto('art', essayDesc.data_id, 'photo')" alt="">
          <div slot="error" class="image-slot">
            <img src="@/static/img/user/headImg.jpg" alt="">
          </div>
        </el-image>
        <div class="author">
          {{ essayDesc.author }}
        </div>
        <div class="create-time">
          {{ essayDesc.create_time }}
        </div>
        <div class="read-count">
          {{ essayDesc.read_count + '人阅读' }}
        </div>
      </div>
      <div class="article-content" v-html="essayDesc.content"></div>
      <!-- <el-image fit="cover" class="head-img" v-for="(item, index) in essayDesc.show_url_list" :key="index" :src="item" alt="">
        <div slot="error" class="image-slot">
          <img src="@/static/img/user/headImg.jpg" alt="">
        </div>
      </el-image> -->
    </div>
    <div v-else class="essay-content">
      <div class="article-content" v-html="essayDesc"></div>
    </div>
    <div class="recomment-essay">
      <div class="about-works-title">
        推荐文章
      </div>
      <div class="see-more">
        <!-- <div class="line"></div> -->
        <div @click="goEssay" class="text" v-if="$ua.isFromPc()">
          查看更多<img src="@/static/img/home/arrow.png" alt="" />
        </div>
        <div @click="goEssay" class="text" v-else>
          查看更多
        </div>
      </div>
      <div class="essay-list" v-for="(item, index) in essayList" :key="item.data_id" @click="goEssayDesc(item.data_id)">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="foot">
          <span class="name">{{ item.author }}</span>
          <span class="read-count">{{ item.read_count + '人阅读' }}</span>
          <span class="time">{{ item.create_time }}</span>
        </div>
      </div>
    </div>
    <div class="about-works">
      <div class="about-works-title">
        相关作品
      </div>
      <div class="see-more" v-show="workList.length > 0">
        <!-- <div class="line"></div> -->
        <div @click="goWorks" class="text" v-if="$ua.isFromPc()">
          更多作品<img src="@/static/img/home/arrow.png" alt="" />
        </div>
        <div @click="goWorks" class="text" v-else>
          查看更多
        </div>
      </div>
      <div v-if="workList.length > 0" class="art-work-list">
        <div class="content" v-for="(item, index) in workList" :key="index" @click="goDesc(item.data_id, item.work_type)">
          <div class="img-content">
            <el-image class="img" :src="item.thumbnail" alt="" fit="cover" />
            <p class="tag">
              {{ typeOptions.find((s) => s.data_id == item.type)?.name }}
            </p>
          </div>
          <div class="title">
            {{ item.name }}
          </div>
          <div class="second-title">
            <div class="author">
              {{ item.art_name }}
            </div>
            <!-- <p class="quality">
              {{ series.find((s) => s.data_id == item.type_child)?.name }}
            </p> -->
            <p class="material">
              {{ item.material }}
            </p>
          </div>
          <div class="collect">
            <img v-if="!item.is_focus" src="@/static/img/favorite_grey.png" alt="">
            <img v-else src="@/static/img/favorite_grey_active.png" alt="">
            {{ $ua.isFromPc() ? item.focus_total : '收藏' }}
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
    <!-- <div class="comment-area">
      <div class="comment-area-title" ref="commentArea">
        评论(13)
      </div>
      <div class="comment-input">
        <img class="head-img" src="@/static/img/user/headImg.jpg" alt="">
        <el-input
          v-model="comment"
          type="textarea"
          resize="none"
          maxlength="2000"
          show-word-limit
        />
      </div>
      <div class="release-comment" @click="replyComment">
        发布评论
      </div>
      <Comment
        :list="$store.getters['user/getCommentList']"
        :parentId="1"
      ></Comment>
    </div> -->
  </div>
</template>

<script>
import comment from '@/components/comment'
import { getUserPhoto } from '../../utils/downloadFile';
export default {
  name: '',
  scrollToTop: true,
  components: {
    Comment: comment
  },
  props: {},
  data () {
    return {
      workList: [],
      series: [],
      essayList: [],
      comment: '',
      essayDesc: {},
      typeOptions: []
    }
  },
  computed: {},
  watch: {
    '$route'(to, from) {
      // 路由发生变化页面刷新
      this.$router.go(0);
    }
  },
  created () {},
  mounted () {
    this.getEssayDesc()
    this.getWorkList()
    this.getProductType()
    this.getEssay()
    this.getCommentList()
    this.$api.getProductType({}, {}).then((res) => {
      this.typeOptions = Array.isArray(res.result.item_list) ? res.result.item_list.filter(item => item.parent_id == -1) : []
    });
  },
  methods: {
    getUserPhoto,
    // 获取评论列表
    getCommentList() {
      const params = {
        works_id: this.$route.query.data_id
      }
      this.$store.dispatch('user/getComment', params)
    },
    // 获取文章列表
    getEssay() {
      this.$api.getEssay({}).then(res => {
        if (res.status == '$SUCCESS') {
          this.essayList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        }
      })
    },
    getEssayDesc() {
      if (this.$route.query.data_id) {
        let essayApi = this.$route.query.type == 'special' ? 'getSpecialEssayDesc' : 'getEssayDesc'
        this.$api[essayApi]({ data_id: this.$route.query.data_id }).then(res => {
          if (res.status == '$SUCCESS') {
            this.essayDesc = res.result
            // this.result.picture_list = Array.isArray(this.result.picture_list) && this.result.picture_list ? this.result.picture_list : []
            console.log('this.result.picture_list', this.essayDesc)
          }
        })
      } else {
        this.essayDesc = this.$route.query.introduction
      }
    },
    goEssayDesc(data_id) {
      window.scrollTo(0, 0);
      this.$router.push({ path: '/dynamic/articleDesc', query: { data_id } })
    },
    goDesc(data_id, type) {
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, type } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    goEssay() {
      this.$router.push('/dynamic')
    },
    goWorks() {
      this.$router.push("/artwork");
    },
    // 获取作品列表
    getWorkList() {
      this.$api.getWorksList({
        work_type: 1,
        recommend: 1
      }).then((res) => {
        this.workList = Array.isArray(res.result.item_list)? res.result.item_list.splice(0, 6) : []
      })
    },
    async getProductType() {
      const res = await this.$api.getProductType({})
      if (res.status == '$SUCCESS') {
        this.series = res.result.item_list
      }
    },
    replyComment() {
      if (this.$store.state.user.token) {
        if (this.comment.trim()) {
          const params = {
            works_id: this.$route.query.data_id - 0,
            comment: this.comment
          }
          this.$store.dispatch('user/replyComment', params).then(res => {
            this.getCommentList()
          })
          // this.$api.replyComment(params, {}).then(res => {
          //   if(res.status === '$SUCCESS') {
          //     this.$message.success('发布评论成功')
          //   }
          // })
        } else {
          this.$message.error('请输入评论内容')
        }
      } else {
        this.$message.warning('请您先登陆')
      }
    }
  }
}
</script>

<style scoped lang="less">
.article-desc {
  &.z-web {
    background: #fff;
    padding: 60px 276px 80px;

    .about-works-title {
      display: inline-block;
      margin: 0 0 30px 0;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }
    .see-more {
      float: right;
      margin: 0;

      .text {
        margin: 0;
      }
    }

    .essay-content {
      margin-bottom: 80px;
      .essay-title {
        font-size: 36px;
        font-weight: bold;
        color: #000;
        text-align: center;
        margin-bottom: 38px;
      }

      .essay-second-title {
        font-size: 16px;
        font-weight: 400;
        color: #333;
        display: flex;
        margin-bottom: 32px;

        .head-img {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          display: inline-block;
          margin-right: 7px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .author {
          display: inline-block;
          margin-right: 32px;
        }

        .create-time,
        .read-count {
          color: #000;
          display: inline-block;
          margin-right: 32px;
        }
      }

      .article-content {
        // font-size: 18px;
        // font-weight: 400;
        // color: #333333;
        // margin-bottom: 32px;

        // ::v-deep(p) {
        //   img {
        //     display: block;
        //     width: 500px;
        //     margin: 0 auto;
        //   }
        //   span {
        //     display: block;
        //     text-align: center;
        //   }
        // }
      }
    }

    .art-work-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      &::after {
        content: '';
        flex: 0 0 411px;
      }

      .content {
        width: 411px;
        height: 414px;
        margin-bottom: 100px;
        cursor: pointer;

        &:nth-child(3n) {
          margin-right: 0;
        }
        .img-content {
          width: 100%;
          height: 308px;
          position: relative;

          ::v-deep(.el-image) {
            width: 100%;
            height: 100%;
          }

          .tag {
            width: 120px;
            height: 36px;
            position: absolute;
            left: 0;
            bottom: 0;
            background: #F7E6D0;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 15px;
            font-size: 16px;
            font-weight: 600;
            color: #000;
          }
        }

        .title {
          margin: 30px 0 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
        }

        .second-title {
          line-height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #999;
          // margin-bottom: 12px;

          p {
            display: inline-block;
          }

          .author {
            margin-bottom: 18px;
          }

          .quality {
            margin-bottom: 18px;
          }
        }

        .collect {
          color: #999;
          font-size: 16px;

          img {
            // width: 30px;
            width: 18px;
            height: 18px;
            position: relative;
            top: -3px;
            margin-right: 5px;
          }
        }
      }
    }

    .recomment-essay {
      margin-bottom: 80px;
      .about-works-title {
        margin: 0 0 23px 0;
      }
      .essay-list {
        text-align: left;
        cursor: pointer;
        margin-bottom: 16px;

        .title {
          font-size: 18px;
          font-weight: 600;
          color: #000;
        }

        .foot {
          font-size: 12px;
          font-weight: 600;
          color: #333333;
          opacity: 0.75;
          margin-top: 13px;

          span {
            display: inline-block;
            margin-right: 10px;
          }
        }
      }
    }

    .comment-area {
      .comment-area-title {
        line-height: 16px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        margin-bottom: 30px;
      }

      .comment-input {
        display: flex;

        .head-img {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          margin-right: 16px;
        }

        ::v-deep(.el-textarea__inner) {
          background: #f5f5f5;
        }

        ::v-deep(.el-textarea .el-input__count) {
          background: #f5f5f5;
        }
      }

      .release-comment {
        width: 100px;
        height: 36px;
        background: #E0CBB4;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        display: inline-flex;
        float: right;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
      }
    }
  }

  &.z-phone {
    margin-top: pxtorem(88) !important;
    .essay-content {
      padding: pxtorem(32) pxtorem(24) pxtorem(80);

      .essay-title {
        font-size: pxtorem(36);
        font-weight: bold;
        color: #000;
        margin-bottom: pxtorem(23);
      }

      .essay-second-title {
        display: flex;
        justify-content: flex-start;
        font-size: pxtorem(24);
        font-weight: 600;
        color: #333333;

        .head-img {
          width: pxtorem(72);
          height: pxtorem(72);
          border-radius: 50%;
          margin-right: pxtorem(14);
        }

        .author {
          margin-right: pxtorem(12);
        }

        .create-time {
          margin-right: pxtorem(12);
        }
      }

      .article-content {
        font-size: pxtorem(18);
        font-weight: 400;
        color: #333333;
        margin-bottom: 32px;

        ::v-deep(p) {
          img {
            display: block;
            width: 100%;
            margin: 0 auto;
          }
          span {
            display: block;
            text-align: center;
          }
        }
      }
    }

    .recomment-essay {
      position: relative;
      padding: 0 pxtorem(24) pxtorem(40);

      .about-works-title {
        font-size: pxtorem(22);
        font-weight: bold;
        color: #000000;
        margin-bottom: pxtorem(34);
      }

      .see-more {
        position: absolute;
        top: 0;
        right: pxtorem(24);
        width: auto;
        margin: 0;
        font-size: pxtorem(22);
        font-weight: 600;

        .text {
          color: #666666;
        }
      }

      .essay-list {
        margin-bottom: pxtorem(30);
        .title {
          font-size: pxtorem(28);
          font-weight: 600;
          color: #000000;
          margin-bottom: pxtorem(14);
        }

        .foot {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #333;
          opacity: 0.75;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .about-works {
      padding: 0 pxtorem(24);
      position: relative;
      .about-works-title {
        font-size: pxtorem(24);
        font-weight: bold;
        color: #000000;
        margin-bottom: pxtorem(27);
      }

      .see-more {
        position: absolute;
        right: pxtorem(24);
        top: 0;
        width: auto;
        margin: 0;

        .text {
          font-size: pxtorem(22);
          font-weight: 600;
          color: #666666;
        }
      }

      .art-work-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, pxtorem(339));
        grid-gap: 10px;
        .content {
          margin-bottom: pxtorem(40);
          .img-content {
            width: pxtorem(340);
            height: pxtorem(254);
            position: relative;

            ::v-deep(.el-image) {
              width: 100%;
              height: 100%;
            }

            .tag {
              position: absolute;
              bottom: 0;
              left: 0;
              width: pxtorem(120);
              height: pxtorem(36);
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #F7E6D0;
              font-size: pxtorem(18);
              font-weight: 600;
            }
          }

          .title {
            width: pxtorem(340);
            margin-top: pxtorem(16);
            font-size: pxtorem(22);
            font-weight: 600;
            color: #000;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
          }
          .collect,
          .second-title {
            font-size: pxtorem(22);
            font-weight: 600;
            color: #999999;
            .author {
              margin-bottom: pxtorem(10);
            }

            .author,
            .material {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
